import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import './categoryMgr.scss';
import Folder from '../folder1.png';
import { Layout, Tree,Button, Tabs, Form,Table,Input,Checkbox,Divider,Modal,} from 'antd';
import UnSubmit from './unSubmit'
import Auditing from './audit'
import UnTrend from './untrend'
import NewResource from './newResource'
import { getTreeData, getNewResBaseInfo, getAllMetaDataTypes, getAllMetaData} from '../../../api/resourceCategory/resourceCategory'
import { actionCreators} from './store'

const { Content,Sider,Header } = Layout;
const { TabPane} = Tabs
const titleStyle={
  color:'rgb(0,126,220)',height:54.6,width:720,backgroundColor:'#f0f3f6',position:'absolute',left:0,top:0,display:'flex',
  alignItems:'center',paddingLeft:24,fontWeight:'bold',borderBottom:'2px solid #e5e6e8',zIndex:2
} 
const footerStyle={
  backgroundColor:'#e6eef5',width:720,height:53,position:'absolute',left:0,bottom:0,
  display:'flex',alignItems:'center',justifyContent:'center'
}

const valueToShareType = {
  0: '有条件共享', 1: '无条件共享', 3: '目', 
}

const valueToShareMode = {1: '平台共享模式'}
const valueToResourceForm = {1: '数据库', 2: '文件', 3: '接口'}
const valueToResStatus = {0: '未报送',1: '审核中', 2: '已退回'}
// const valutTo
class Category extends Component{
  constructor() {
    super()
    this.columns1=[
      {
        title:'序号',key:'index',dataIndex:'index',
        render: (text, record, index)=><span>{index+1}</span>
      },
      {
        title:'资源代码',key:'catalogue_number',dataIndex:'catalogue_number',
      },
      {
        title:'资源名称',key:'resource_name',dataIndex:'resource_name',
        render:(text,record)=>{return <a onClick={()=>this.view(record)} style={{color:'black'}}>{text}</a>}
      },
      {
        title:'资源提供方',key:'resource_provider',dataIndex:'resource_provider',
      },
      {
        title:'共享类型',key:'share_type',dataIndex:'share_type',
        render:(text,record)=>{return <span >{valueToShareType[text]}</span>}
      },
      {
        title:'共享方式',key:'share_mode_type',dataIndex:'share_mode_type',
        render:(text,record)=>{return <span >{valueToShareMode[text]}</span>}
      },
      {
        title:'资源格式',key:'resource_form',dataIndex:'resource_form',
        render:(text,record)=>{return <span >{valueToResourceForm[text]}</span>}
      },
      {
        title:'报送状态',key:'resource_status',dataIndex:'resource_status',
        render:(text,record)=>{return <span >{valueToResStatus[text]}</span>}
      },
    ]
    this.state={
      total:20,
      page:1,
      totalPage:2,
      curNumber: '',//左边树选中的部门编码
      type: '',//级别
      name:'',
      number:'',
      initialData: {},
      treeData: [],
      addVisible:false,
      metedataTypes: [],
      editorVisible:false,
    }
  }

  changeName=(e)=>{
    this.setState({
      name:e.target.value
    });
  }

  changeNumber=(e)=>{
    this.setState({
      number:e.target.value
    })
  }
  searchForm=React.createRef();

  search=()=>{
    this.searchForm.current.validateFields().then(values=>{
      console.log(values);
    })
  }


  editor=(record)=>{
    this.setState({
      editorVisible:true,
      record
    })
  }
  changePage=(page)=>{
    this.setState({
      page
    })
  }

  view = (record) => {
    console.log('in category regis', record)
  }

  deleteRecord=(record)=>{

  }

  handleAdd=()=>{
    console.log('this.state.curNumber', this.state.curNumber)
    if(this.state.curNumber!=='') {
      // let obj ={number: this.state.curNumber}
      getNewResBaseInfo({number: this.state.curNumber}).then(res => {
        if(res.data.metaData.code === 'success') {
          let obj = {
            resourceProvider: res.data.data.resourceProvider,
            wholeName: res.data.data.wholeName,
            resourceId: res.data.data.resourceId,
            catalogueNumber: this.state.curNumber
          }
          // this.setState({initialData: obj, addVisible:true})
          this.props.setFormInitialData(obj)
          this.setState({initialData: obj, addVisible:true})
        }
      })
      getAllMetaDataTypes({number: this.state.curNumber}).then(res => {
        if(res.data.metaData.code === 'success') {
          this.setState({metedataTypes: res.data.data})
        }
      })
    }
  }

  editorCategory=()=>{
    this.setState({
      editorVisible:false
    })
  }

  handleCancel=()=>{//处理关闭
    this.setState({
      addVisible:false,
      editorVisible:false
    })
  }

  componentWillMount() {
    getTreeData().then(res => {
      console.log(res.data)
      let c = this.formatTreeData(res.data.data,1)
      this.setState({treeData:c})
    })
  }

  formatTreeData = (data, layer) => {
    data.map((item, index) => {
      if(item.children&& (JSON.stringify(item.children) !== '[]') && item.children.length > 0) {
        item.layer = layer
        item.icon = <img src={Folder} alt='未知' />
        this.formatTreeData(item.children, layer+1)
      }
      else {
        item.layer = layer
      }
    })
    return data
  }

  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
    let layer = info.node.layer
    let obj = {
      name: '',
      departMent: info.node.title,
      curNumber: '',
      superNumber: info.node.key,
      description: '',
      layer: layer
    }
    this.setState({curNumber: selectedKeys[0], type: 5-layer})
  }

  render(){
    const {total,page,totalPage,name,number, curNumber, type,  treeData, addVisible,editorVisible}=this.state;
    return (
      <Content style={{position:"relative",left:-24}} className='out-content' >
        <Layout className='layout'>
          <Sider className='sider'>
            <Tree
              defaultExpandAll={true}
              showLine={true}
              showIcon={true}
              treeData={treeData}
              onSelect={this.onSelect}
            />
          </Sider>
          <Layout className='rightLayout'>
            <Header className='right-header'>
              <p className='title'>目录登记</p>
              <Button type='primary' style={{position:'absolute',right:0}} onClick={this.handleAdd}>新增</Button>
            </Header>
            <Content className='content'>
            <Tabs type="card">
            <TabPane tab="   未报送   " key="1">
              <UnSubmit curNumber={curNumber} type={type}  baseColumns = {this.columns1} />
            </TabPane>
            <TabPane tab="   审核中   " key="2">
              <Auditing baseColumns = {this.columns1} />
            </TabPane>
            <TabPane tab="   已退回   " key="3">
              <UnTrend baseColumns = {this.columns1} />
            </TabPane>
          </Tabs>
            </Content>
          </Layout>
        </Layout>
                  {/* bodyStyle={{backgroundColor:'#f0f3f6', height: '65%'}} */}

        <Modal
          title={<div>新增资源基本信息</div>}
          onCancel={this.handleCancel}
          visible={addVisible}
          width='900px'
          bodyStyle={{overflow:'auto',height:750}}
          footer={null}
          destroyOnClose
        >
          <NewResource onRef={ref=>this.addData=ref}
            curNumber={this.state.curNumber}
            metedataTypes={this.state.metedataTypes}
            onClose={this.handleCancel} />
        </Modal>
        <Modal
          title='编辑目录'
          onOk={this.editorCategory}
          visible={editorVisible}
        >

        </Modal>
      </Content>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    initialData: state.getIn(['catemanage', 'initialData']).toJS()
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setFormInitialData(data) {
      console.log('data', data)
      dispatch(actionCreators.setFormInitialData(data))
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Category);